<template>
  <div>
    <div class="banner-top" v-if="videoSetting.banner_url"><img :src="videoSetting.banner_url"></div>
    <div class="live-index" v-if="videoSetting.open_video_module == 1" @click="openChannelsUserProfile">
      <div class="index-title">进入视频号首页，发现更多惊喜</div>
      <div class="index-btn"><div>进入</div></div>
    </div>
    <div class="tbody">
      <!-- 正在直播 -->
      <template  v-if="nowLive && nowLive.status == 2">
        <div class="whole-list" @click="onJumpLive(nowLive)">
          <img class="bg-img" :src="videoSetting.video_img_url ? videoSetting.video_img_url : 'https://img.wifenxiao.com/h5-wfx/images/live/example2.png'" mode="aspectFill">
          <div class="list">
              <img class="liveIcon" height="20" width="75" src="https://img.wifenxiao.com/h5-wfx/images/live/liveProgressNew.png" mode="aspectFill">
          </div>
          <div class="list black-bg">
            <div class="sub-title">{{nowLive.description || videoSetting.video_title || '正在直播'}}</div>
            <div class="live-name" v-if="nowLive.headUrl">
              <div class="live-img"><img :src="nowLive.headUrl"></div>
              <div class="live-msg">{{nowLive.nickname}}</div>
              <div class="live-share" @click.stop="nowShowGoodsCode()"><div>分享好友</div></div>
            </div>
          </div>
        </div>
        <div class="whole" v-if="firstLive && firstLive.startTime">
          <div class="top">
            <img height="20" src="https://img.wifenxiao.com/h5-wfx/images/live/livenoStartedNew.png" mode="aspectFill">
            <div class="time">{{newTime(firstLive.startTime)}}开播</div>
          </div>
          <div class="top">
            <div class="banner">
              <img :src="list.length>0 && list[0].live_cover ? list[0].live_cover : 'https://img.wifenxiao.com/h5-wfx/images/live/example2.png'" mode="aspectFill">
            </div>
            <div class="list-msg">
              <div class="live">{{list.length>0 && list[0].live_name ? list[0].live_name : '直播预告'}}</div>
              <div class="live-name">
                <div class="live-img"><img :src="firstLive.headUrl"></div>
                <div class="live-msg">{{firstLive.nickname}}</div>
              </div>
              <div class="btn">
                <div class="live-share live-share-reservation" v-if="firstLive.reservable" @click="reserveChannelsLive(firstLive.noticeId)"><div>预约直播</div></div>
                <div class="live-share" @click.stop="showGoodsCode(list[0], firstLive.startTime)"><div>分享好友</div></div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <!-- 预告 -->
      <div class="whole-list" v-else-if="firstLive && firstLive.startTime">
        <img class="bg-img" :src="list.length>0 && list[0].live_cover ? list[0].live_cover : 'https://img.wifenxiao.com/h5-wfx/images/live/example2.png'" mode="aspectFill">
        <div class="list">
            <img class="liveIcon" height="20" width="75" src="https://img.wifenxiao.com/h5-wfx/images/live/livenoStartedNew.png" mode="aspectFill">
        </div>
        <div class="list black-bg">
          <div class="live-time">{{newTime(firstLive.startTime)}}开播</div>
          <div class="sub-title">{{list.length>0 && list[0].live_name ? list[0].live_name : '直播预告'}}</div>
          <div class="live-name">
            <div class="live-img"><img :src="firstLive.headUrl"></div>
            <div class="live-msg">{{firstLive.nickname}}</div>
            <div class="live-share live-share-reservation" @click="reserveChannelsLive(firstLive.noticeId)"><div>预约直播</div></div>
            <div class="live-share" @click.stop="showGoodsCode(list[0], firstLive.startTime)"><div>分享好友</div></div>
          </div>
        </div>
      </div>
      <template v-if="firstLive.otherInfos && firstLive.otherInfos.length > 0">
        <div class="whole" v-for="(item,index) in firstLive.otherInfos" :key="index">
          <div class="top">
            <img height="20" width="75" src="https://img.wifenxiao.com/h5-wfx/images/live/livenoStartedNew.png" mode="aspectFill">
            <div class="time">{{newTime(item.startTime)}}开播</div>
          </div>
          <div class="top">
            <div class="banner">
              <img :src="list.length>index+1 && list[index+1].live_cover ? list[index+1].live_cover : 'https://img.wifenxiao.com/h5-wfx/images/live/example2.png'" mode="aspectFill">
            </div>
            <div class="list-msg">
              <div class="live">{{list.length>index+1 && list[index+1].live_name ? list[index+1].live_name : '直播预告'}}</div>
              <div class="live-name">
                <div class="live-img"><img :src="item.headUrl"></div>
                <div class="live-msg">{{item.nickname}}</div>
              </div>
              <div class="btn">
                <div class="live-share live-share-reservation" v-if="item.reservable" @click="reserveChannelsLive(item.noticeId)"><div>预约直播</div></div>
                <div class="live-share" v-if="list.length>index+1" @click.stop="showGoodsCode(list[index+1], item.startTime)"><div>分享好友</div></div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <no-data v-if="finished" :noData="noData"></no-data>



    </div>

    <!-- ST 自定义分享 -->
    
    <god-share-cpt ref="god-share-cpt" openLive="1" @shareLive="shareLive" @share="shareGoods"></god-share-cpt>
    <!-- ED 自定义分享 -->
    <goods-code :visible.sync="goodsCodeDialogVisible" :codeData="qrcode"></goods-code>
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>
<script>
import GodShareCpt from '@/components/god/god-share'
import goodsCode from '../../item/components/goodsCode'
import { mpShare } from '@/utils/utils'
import { getWeixinVideoLiveList, videoDetailQrcode,getVideoSetting } from '@/api/user/live/list'
import noData from '@/components/noData/index'
import SmallLogin from '@/components/SmallLogin/smallLogin'
import small from '@/smallapp/small.js'
import { formatDate } from '@/utils/index.js'

export default {
  components: {
    GodShareCpt,
    goodsCode,
    noData,
    SmallLogin
  },
  data() {
    return {
      noData: {
        width: '240px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/xloop/no-order-xloop-active.png',
        text: '暂无直播预告',
        txtMarginTop: '0px'
      },
      goodsCodeDialogVisible: false, // 商品分享二维码
      is_custom_poster: 1,
      is_poster_show: 0,
      list: [],
      qrcode: 'https://mp.wfx.qibcms.com/Public/itemDetailQrcode/item_id/4965461/activity/0/Xylm/iHNX0v/sid/6.html',
      page: 1,
      error: false,
      loading: false,
      finished: false,
      isload: false,
      live: {},
      nowLive: {},
      firstLive: {},
      videoSetting: {
        video_id: '',
        open_video_module: 0,
        banner_url: '',
        video_title: '',
        video_img_url: ''
      },
    }
  },
    mounted() {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
      window.addEventListener('wxshow', () => {
        this.getList()
        // this.init()
      })
      // 小程序触底加载更多
      // window.addEventListener('reachbottom', () => {
      //   if(!this.finished){
      //     this.onLoad()
      //   }
      // })
  },
  created() {
    // this.getList()
		// this.init()
    // wx.getChannelsLiveNoticeInfo({
    //   finderUserName: 'sphLy3N43CQ5w7Q',
    //   success: (res1) => {
    //     // console.log('res1', res1)
    //   },
    //   fail: (err) => {
    //     // console.log("error", err);
    //   },
    // })
	},
  methods: {
    newTime(time) {
      return formatDate(time)
    },
    init() {
      this.$loadingWrap.show()
      // setTimeout(() => {
      //   this.$loadingWrap.close()
      // }, 50000)
      getVideoSetting().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.videoSetting = res.data
          if (this.videoSetting.video_id) {
            this.getChannelsLiveInfo()
            this.getChannelsLiveNoticeInfo()
          } else {
            this.finished = true
          }
        } else {
          this.$Error(res.msg)
        }
        // console.log('res', res.data)
      })

      // this.onLoad()
    },
    // 直播列表
    getChannelsLiveInfo() {
      if (wx.getChannelsLiveInfo) {
        wx.getChannelsLiveInfo({
          finderUserName: this.videoSetting.video_id,
          success: (res) => {
            // console.log('直播', res)
            this.nowLive = res
            // console.log('this.nowLive', this.nowLive)
          }
        })
      } else {
        // console.log('不支持获取直播')
      }
    },
    // 预告列表
    getChannelsLiveNoticeInfo() {
      if (wx.getChannelsLiveNoticeInfo) {
        wx.getChannelsLiveNoticeInfo({
          finderUserName: this.videoSetting.video_id,
          success: (res1) => {
            // console.log('预告', res1)
            this.firstLive = res1
            if (this.firstLive.otherInfos && this.firstLive.otherInfos.length == 0) {
              // this.list == 0
              this.finished = false
            }
          },
          fail: (err) => {
            // console.log("error", err);
            if (err.errMsg == "getChannelsLiveNoticeInfo:fail empty") {
              this.finished = true
            }
          },
        })
      } else {
        // console.log('不支持获取预告')
      }
    },
    reserveChannelsLive(noticeId) {
      if (wx.reserveChannelsLive) {
        wx.reserveChannelsLive({
          noticeId,
          success: (res1) => {
            // this.$Error('预约成功')
          },
          fail: (err) => {
            // console.log("error", err);
            this.$Error(err.errMsg)
          },
        })
      } else {
        this.$Error('请升级您的小程序版本')
      }
    },
    // 跳转直播间
    onJumpLive(live) {
      // console.log('live', live)
      if (wx.openChannelsLive) {
        wx.openChannelsLive({
          finderUserName: this.videoSetting.video_id,
          feedId: live.feedId,
          nonceId: live.nonceId,
          success: (res) => {
            // console.log(res)
          },
          fail: (err) => {
            // console.log(err)
            this.$Error('跳转直播间失败：', err.errMsg)
          }
        })
      } else {
          this.$Error('请升级您的小程序版本')
      }
    },
    // 跳转视频号主页
    openChannelsUserProfile() {
    if (wx.openChannelsUserProfile) {
        wx.openChannelsUserProfile({
          finderUserName: this.videoSetting.video_id,
          success: (res1) => {
            this.$Error('打开视频号主页')
          },
          fail: (err) => {
            // console.log("error", err);
            this.$Error(err)
          },
        })
      } else {
        this.$Error('请升级您的小程序版本')
      }
    },
    getList() {
      this.$loadingWrap.show()
      getWeixinVideoLiveList()
        .then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.list = res.data.lists
            // TODO 小程序分享
            const option = {
              title: '直播列表',
              shareParam: '',
            }
            const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : 0
            const sid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').shop_id : 0
            // console.log(small.wxCache('global_login_info'), 'small', `/link/pages/liveList/index?sid=${sid}&pid=${pid}`)
            
            mpShare (true, false, `/link/pages/liveList/index?sid=${sid}&pid=${pid}`, option, '')
          } else {
            // this.$Error(res.msg)
          }
          this.init()
        })
        .catch(() => {
          this.init()
          this.error = true
        })
    },
    showGoodsCode(live, time) {
      this.live = {
        ...live,
        time
      }
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      } else {

      const option = {
          title: live.live_name,
          imgUrl: live.share_cover, // 分享图标
          shareParam: '',
        }
        const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : 0
        const sid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').shop_id : 0
        // console.log(small.wxCache('global_login_info'), 'small', `/link/pages/liveList/index?sid=${sid}&pid=${pid}`)
        
        mpShare (true, false, `/link/pages/liveList/index?sid=${sid}&pid=${pid}`, option, '')
      const detailsAll = {
        item_detail: {
          title: live.live_name, 
          src: live.share_cover
        }
      }
      this.$refs["god-share-cpt"].show(detailsAll)
      }

    },
    nowShowGoodsCode() {
      if (!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      } else {

      const option = {
          title: this.videoSetting.video_title,
          imgUrl: this.videoSetting.video_img_url, // 分享图标
          shareParam: '',
        }
        const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : 0
        const sid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').shop_id : 0
        // console.log(small.wxCache('global_login_info'), 'small', `/link/pages/liveList/index?sid=${sid}&pid=${pid}`)
        
        mpShare (true, false, `/link/pages/liveList/index?sid=${sid}&pid=${pid}`, option, '')
      const detailsAll = {
        item_detail: {
          title: this.videoSetting.video_title, 
          src: this.videoSetting.video_img_url
        }
      }
      this.$refs["god-share-cpt"].show(detailsAll)
      }

    },
    shareGoods() {
      this.$loadingWrap.show()
      videoDetailQrcode({id:this.live.id, time:this.live.time}).then(res => {
      this.$loadingWrap.close()
        if (res.status == 1) {
          // console.log('res', res)
          this.qrcode = res.data.path
          // this.detailAll.item_poster = res.data.item_poster
          this.goodsCodeDialogVisible = true
        } else {
          this.$Error(res.msg)
        }

      })
      // wxItemQrCode({item_id: this.detailAll.item_detail.item_id, activity: this.detailAll.activity,activityGroupId: this.$route.query.groupId}).then(res => {
      //   this.$loadingWrap.close()
      //   if (res.status == 1) {
      //     this.detailAll.qrcode = res.data.path
      //     this.detailAll.item_poster = res.data.item_poster
      //     this.goodsCodeDialogVisible = true;
      //   } else {
      //     this.$Error(res.msg)
      //   }
      // })
    },
  }
}
</script>
<style lang="scss">
.banner-top {
  img {
    width: 100%;
  }
}
.live-index {
  margin: 24px 16px 0 16px;
  padding: 0 16px;
  background-color: #fff;
  border-radius: 8px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .index-title {
    font-size: 32px;
    color: #333;
  }
  .index-btn {
    div {
      font-size: 28px;
      color: #FD4149;
      line-height: 140%;
      padding: 8px 32px;
      border-radius: 200px;
      border: 1px solid #FD4149;
    }
  }
}
.whole-list {
  margin: 24px 16px 16px 16px;
  // padding: 16px 16px 24px 16px;
  height: 716px;
  position: relative;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .list {
    z-index: 5;
    .live-time {
      background: rgba(0, 0, 0, 0.40);
      text-align: center;
      color: #fff;
      line-height: 140%;
      font-weight: 500;
      font-size: 24px;
      border-radius: 50px;
      width: auto;
      display: inline;
      padding: 4px 16px;
    }
    .sub-title {
      color: #fff;
      font-size: 32px;
      font-weight: 500;
      line-height: 140%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 8px;
    }

    .liveIcon {
      width: 150px;
      margin: 16px 0 0 16px;
    }
    &.black-bg {
      padding: 16px 16px 24px 16px;
      background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 0%, rgba(17, 17, 17, 0.90) 100%);
    }
  }
}
.whole {
  margin: 0 16px 16px;
  background: #fff;
  padding: 24px;
  .top {
    display: flex;
    // align-items: center;
    // justify-content: space-between;
    .time {
      margin-left: 16px;
      font-size: 32px;
      font-weight: 500;
    }
    .banner {
      margin-top: 24px;
      img {
        width: 212px;
        height: 212px;
        border-radius: 8px;
        object-fit: cover;
      }
    }
    .list-msg {
      margin-top: 24px;
      margin-left: 16px;
      position: relative;
      flex: 1;
      .live {
        overflow:hidden; 
        text-overflow:ellipsis;
        display:-webkit-box; 
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2; 
        font-size: 28px;
        line-height: 140%;
        margin-bottom: 12px;
      }
      .live-name {
        color: #999
      }
      .btn {
        position: absolute;
        display: flex;
        right: 0;
        bottom: 0;
        .live-share {
          div {
            color: #2948FF;
            border-color: #2948FF;
          }
        }
      }
    }


  }
}
    .live-name {
      display:flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      margin-top: 4px;
      color: #fff;
      font-size: 24px;
      .live-img {
        img {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          object-fit: cover;
          margin-right: 8px;
        }
      }
      .live-msg {
        flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
      }
    }
    .live-share {
      div {
        font-size: 28px;
        line-height: 140%;
        padding: 8px 0;
        width: 176px;
        text-align: center;
        border-radius: 50px;
        border: 1px solid #fff
      }
      &.live-share-reservation {
        margin-right: 16px;
        div {
          color: #fff!important;
          background: linear-gradient(270deg, #2948FF 0%, #396AFC 100%), linear-gradient(90deg, #FE754F -0.78%, #FD4149 99.06%);
          border: none
        }
      }
      &.live-share-already {
        margin-right: 16px;
        div {
          color: #2948FF;
          background: #EFF2FF;
          border: none
        }
      }

    }
 .code-dialog{
    background: #fff;
    position: relative;
    .code-pop{
      overflow:hidden;
      border-radius:20px;
      width:600px;
    }
    .code-wrap{
      padding:20px;
      .item_qrcode{
        display:block;
        width:100%;
        max-height:960px;
      }
    }
  }
</style>